<!-- eslint-disable vue/no-parsing-error -->
<template>
  <div class="policy-wrap" v-loading="loading">
    <el-scrollbar
      ref="scrollRef"
      max-height="100%"
      @scroll="scroll"
      v-if="noticeList.length"
      style="padding-right: 10px"
    >
      <div
        class="policy-item"
        v-for="(item, index) in noticeList"
        :key="item.id"
        @click="toDialog(item)"
      >
        <div class="number">{{ index < 9 ? index + 1 : '' }}</div>
        <div class="content-right">
          <p class="policy-title g-ell">{{ item.title }}</p>
          <p class="policy-time">发布日期：{{ delTime(item.releaseTime) }}</p>
        </div>
      </div>
      <!-- <div class="no-more" v-loading="loading" v-if="!hasMore && noticeList.length > 5">
        <el-divider style="font-weight: 400px">没有更多了</el-divider>
      </div> -->
    </el-scrollbar>
    <NoDataBox v-else name="当前暂无相关政策"></NoDataBox>
  </div>
  <Preview v-model:visible="dialogVisible" :info="dialogMain"></Preview>
</template>
<script lang="ts" setup>
import Preview from '@/businessComponents/Preview/index.vue';
import NoDataBox from '../NoDataBox/index.vue';
import { useNotice } from './useNotice';
const { noticeList, dialogMain, dialogVisible, toDialog, loading, scroll, hasMore, scrollRef } =
  useNotice();
const delTime = (dateStr: string) => {
  let arr = dateStr.split(' ');
  if (arr.length) {
    return arr[0];
  }
  return dateStr;
};
</script>
<style lang="scss" scoped>
.policy-wrap {
  width: 100%;
  height: 348px;
  background: #ffffff;
  border-radius: 0px 0px 6px 6px;
  // padding: 8px;
  padding: 8px 0 8px 8px;
}
.policy-item {
  display: flex;
  width: 100%;
  height: 64px;
  border-radius: 3px;
  cursor: pointer;
  padding: 8px 12px;
  &:hover {
    background: #edf2f7;
    .policy-title {
      color: $themeColor !important;
    }
  }
  .number {
    font-size: 22px;
    font-family: D-DINExp-Bold, D-DINExp;
    font-weight: bold;
    color: #96a7b3;
    line-height: 24px;
    width: 28px;
  }
  .content-right {
    width: calc(100% - 28px);
    .policy-title {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #435970;
      line-height: 22px;
    }
    .policy-time {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #7a8a99;
      line-height: 20px;
      margin-top: 2px;
    }
  }
}
.no-more {
  height: 38px;
  padding: 24px 24px 0;
  :deep(.el-divider__text) {
    color: #a9aeb3;
  }
  :deep(.el-divider--horizontal) {
    margin: 0;
    border-top: 1px solid #ebeef5;
  }
}
</style>
